<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪元素-before-after</title>
    <style>
        /* 
            伪元素
                E::before
                E::after
            1、是一个行内元素，如果想设置宽、高的话，需要转成块 display:block 
                float:**  postion:
            2、必须添加 content 如果内有内容 必须是 content: ''
            3、E:before E:after 在老版本是伪类，但是在css3中是伪元素 E::before E::after
                新版本会把 之前版本的 伪类 当做伪元素来处理
            4、E::before 在E元素之前添加元素
            5、E::after 在E元素之后添加元素
        */

        * {
            margin: 0;
            padding: 0;
        }

        body {
            padding: 100px;
        }

        div:nth-of-type(1) {
            width: 300px;
            height: 200px;
            background-color: red;
            float: left;
            /* position: relative; */
        }

        div:nth-of-type(2) {
            width: 100px;
            height: 200px;
            background-color: blue;
            float: left;
            position: relative;
        }

        div:nth-of-type(2)::before {
            /* 必须添加 content 属性，否则后期不可见 */
            content: '';
            /* 默认是行级元素，如果想设置 宽、高 就必须转换为块级元素 */
            width: 20px;
            height: 20px;
            background-color: #fff;
            border-radius: 10px;
            position: absolute;
            top: -10px;
            left: -10px;
        }

        div:nth-of-type(2)::after {
            /* 必须添加 content 属性，否则后期不可见 */
            content: '';
            /* 默认是行级元素，如果想设置 宽、高 就必须转换为块级元素 */
            width: 20px;
            height: 20px;
            background-color: #fff;
            border-radius: 10px;
            position: absolute;
            bottom: -10px;
            left: -10px;
        }

        /* div:nth-of-type(1)::after {
            // 必须添加 content 属性，否则后期不可见
            content: '';
            // 默认是行级元素，如果想设置 宽、高 就必须转换为块级元素
            width: 20px;
            height: 20px;
            background-color: #fff;
            border-radius: 10px;
            position: absolute;
            bottom: -10px;
            right: -10px;
            z-index: 1;
        } */

    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>